❓질문

리액트에서 index를 key값으로 사용하면 안되는 이유에 대해서 설명해주세요.

💡 조사하기전 내가 알고 있던 내용

리액트에서 여러개 같은 컴포넌트를 생성할때 여러 컴포넌트를 작성하는것이 아닌 반복문등으로 만들수있습니다

이때 반복되는 컴포넌트에 key라는 속성이 있고 이 값을 넣어줄수있습니다 리액트는 이 컴포넌트들을 리렌더링할때 변화점이있을때 혹은 컴포넌트를 찾아야할때 key값을 바탕으로 찾게 됩니다 이때 리액트 초보들은 반복문이니까 index값은 1씩 증가할것이고 이는 전부 다른값이니까 괜찮지 않을까? 하고 넣게됩니다 그러나 index는 배열의 순서를 나타낼뿐 고유한 값이 아닙니다. 그렇기때문에 요소의 첫번째를 삭제한다면 전부 리렌더링 될것이고 추가나 재정렬할때도 불필요한 리렌더링이 요구될수있습니다

그렇기 때문에 서버에서 제공해주는 고유한 id값을 활용하는게 가장 좋은 예시로 들어지며 이가 안될경우 고유한 id값을 만들수있는 방법을 찾은후 적용하는게 바람직하다 생각합니다.

🏫 정리한 내용

위 내용과 크게 틀리지는 않지만 컴포넌트의 생성이라는 말보다는 리스트의 생성이라는말이 맞는거 같습니다 이 부분만 수정해서 기억하고 있으면 좋을거 같습니다.